<template>
  <el-dialog :title="title" :visible.sync="dialogShow" @close="close">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="部门名称" prop="name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code" :label-width="formLabelWidth">
        <el-input v-model="form.code" autocomplete="off" />
      </el-form-item>
      <!-- 手动给下拉框加失去焦点事件，然后在事件里手动校验 -->
      <el-form-item
        label="部门负责人"
        prop="manager"
        :label-width="formLabelWidth"
      >
        <el-select
          v-model="form.manager"
          placeholder="请选择负责人"
          @focus="getEmp"
          @blur="$refs.form.validateField('manager')"
          @change="$refs.form.validateField('manager')"
        >
          <el-option v-for="item in empList" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="部门介绍"
        prop="introduce"
        :label-width="formLabelWidth"
      >
        <el-input v-model="form.introduce" type="textarea" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogShow = false">取 消</el-button>
      <el-button
        type="primary"
        @click="save"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { deptListAPI, addDeptAPI, editDeptAPI } from '@/api/departments'
import { simpleListAPI } from '@/api/employees'
export default {
  data() {
    // rule： 得到规则对象（一般没什么用）
    // value：得到输入的内容
    // callback：调用它什么都不传就代表校验通过，callback如果传了new Error就会校验出错（弹出红字提示）
    const checkName = async(rule, value, callback) => {
      if (this.title === '查看部门' && value === this.oldForm.name) {
        return callback()
      }

      // 1. 获取所有部门列表
      const res = await deptListAPI()
      /*
      // 2. 筛选出同级
      const arr = res.data.depts.filter(v => v.pid === this.form.pid)
      // 3. 判断是否有相同名字 -- 找同级里是否有名字等同于输入内容的
      if (arr.find(v => v.name === value)) {
        callback(new Error('同级里部门名不能重复！'))
      } else {
        callback()
      }
      */
      // 优化：一个循环搞定，因为其实要同时满足2个条件： 1. 同级  2.名字重复  就代表校验要失败
      // 两个都要满足&&
      if (res.data.depts.find(v => v.pid === this.form.pid && v.name === value)) {
        callback(new Error('同级里部门名不能重复！'))
      } else {
        callback()
      }
    }

    const checkCode = async(rule, value, callback) => {
      // 如果是修改，而且输入的内容跟原本的内容一致可以直接校验通过
      if (this.title === '查看部门' && value === this.oldForm.code) {
        return callback()
      }

      // 1. 获取所有部门列表
      const res = await deptListAPI()

      // 2. 在所有部门里找code是否有一样的
      if (res.data.depts.find(v => v.code === value)) {
        callback(new Error('部门编码不能重复！'))
      } else {
        callback()
      }
    }

    return {
      title: '新增部门',
      dialogShow: false,
      form: {
        name: '',
        code: '',
        manager: '',
        introduce: '',
        pid: ''
      },
      // 保存原本的名字和编码
      oldForm: {
        name: '',
        code: ''
      },
      rules: {
        name: [
          // 主要是给输入框用的
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { validator: checkCode, trigger: 'blur' }
        ],
        manager: [{ required: true, message: '请选择负责人', trigger: 'blur' }],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' }
        ]
      },
      formLabelWidth: '120px',
      empList: []
    }
  },
  methods: {
    async getEmp() {
      const res = await simpleListAPI()
      this.empList = res.data
    },

    save() {
      // 1. 做整个表单校验
      this.$refs.form.validate(async v => {
        if (v) {
          if (this.title === '新增部门') {
            // 全部校验通过
            await addDeptAPI(this.form)
            // 弹出提示
            this.$message.success('新增部门成功')
          } else {
            // 修改
            await editDeptAPI(this.form)
            this.$message.success('修改部门成功')
          }
          // 隐藏对话框
          this.dialogShow = false
          // 刷新数据-通知
          this.$emit('refresh')
        }
      })
    },
    close() {
      // 清空表单输入内容
      this.form = {
        name: '',
        code: '',
        manager: '',
        introduce: '',
        pid: ''
      }
      // 还要清空校验结果
      this.$refs.form.clearValidate()
      // 恢复初始值 -- 我第一次点对话框（对话框诞生的那一刻），form的初始值，就是查出来的回显的部门
      // 所以即使你恢复还是恢复到财务部
      // this.$refs.form.resetFields()
    }
  }
}
</script>

<style></style>
